<template>
    <el-container class="container">
        <el-header>
            <div class="h-left">
                <div class="title">
                    <ul>
                        <li>Y</li>
                        <li>Y</li>
                        <li>的</li>
                        <li>音</li>
                        <li>乐</li>
                    </ul>
                </div>
                <div>
                    <span>左</span>
                    <span>右</span>
                </div>
            </div>
            <div class="h-right">
                <el-input v-model="searchName" placeholder="搜索" @keyup.enter.native="searchSong"></el-input>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <ul>
                    <li>
                        <router-link to="/discovery">
                            <span class="el-icon-platform-eleme"></span>
                            发现音乐
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/playlists">
                            <span class="el-icon-platform-eleme"></span>
                            推荐歌单
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/newsongs">
                            <span class="el-icon-platform-eleme"></span>
                            最新音乐
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/newmvs">
                            <span class="el-icon-platform-eleme"></span>
                            最新MV
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/mysonglists">
                            <span class="el-icon-platform-eleme"></span>
                            我的歌单
                        </router-link>
                    </li>
                </ul>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                searchName: ""
            }
        },
        methods: {
            // 路由传参
            searchSong() {
                if(this.searchName!=""){
                    this.$router.push({
                        path: '/searchlist',
                        query:{
                            songName: this.searchName
                        }
                    })
                }else{
                    this.$message({
                        message: '请输入内容',
                        type: 'warning'
                    });
                }
            }
        },
    }
</script>

<style scoped>
    .container{
        height: 100%;
    }

    .el-header{
        background-color: #ede2e0;
        text-align: center;
        line-height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
  }
  
  .el-aside {
    background-color: #f2e9de;
    text-align: center;
  }
  
  .el-main {
    background-color: #e6d4c6;
  }

  .h-left{
      width: 400px;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .title ul li{
      display: inline-block;
      width: 34px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      border: 1px solid red;
  }

  .el-aside ul li{
      line-height: 60px;
      font-size: 20px;
  }
  
</style>